<template>
  <div class="content-container" style="position: relative;height:calc(100vh - 60px)">
    <div class="panel">
      <div class="content-wrapper">
        <div>
          <span style="font-weight: bold; font-size: large; padding-left: 10px">{{ positionInfo.gwmc00 }}</span>
        </div>
        <div class="content-item">
          <span class="item-label">工种:</span>
          <span class="item-value">{{ positionInfo.gzmc00 }}</span>
        </div>
        <div class="content-item">
          <span class="item-label">应聘时间:</span>
          <span class="item-value">{{ applyPositionInfo.ypsj00 }}</span>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="content-item">
          <span class="item-label">工单状态:</span>
          <span class="item-value" style="font-weight: bold; color: red; font-size: large; line-height: 15px">{{
              gdzt00Options[applyPositionInfo.gdzt00]
            }}</span>
        </div>
      </div>
      <div class="content-wrapper">
        <y-title content="签约信息"/>
        <div class="content-item" style="gap: 10px">
          <span class="item-value" style="color: #02BA90; font-weight: bold">{{ gzjsqrOptions[applyPositionInfo.gzjsqr] }}</span>
          <span class="item-value" style="color: red; font-weight: bold;">雇主{{
              gzqyztOptions[applyPositionInfo.gzqyzt]
            }}</span>
          <span class="item-value" style="color: red; font-weight: bold;">零工{{
              lgqyztOptions[applyPositionInfo.lgqyzt]
            }}</span>
        </div>
        <div style="margin-top: 10px">
          <y-title content="保险信息"/>
          <div class="content-item">
            <span class="item-value">{{ bxzt00Options[applyPositionInfo.bxzt00] }}</span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <y-title content="工作时间"/>
          <div class="content-item">
            <span class="item-label" style="color: lightgray">开工时间:</span>
            <span class="item-value">{{ positionInfo.gzqssj }}</span>
          </div>
          <div class="content-item">
            <span class="item-label" style="color: lightgray">完工时间:</span>
            <span class="item-value">{{ positionInfo.gzjzsj }}</span>
          </div>
          <div class="content-item">
            <span class="item-label" style="color: lightgray">招聘截止:</span>
            <span class="item-value">{{ positionInfo.zpjz00 }}</span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <y-title content="劳务费用"/>
          <div class="content-item">
            <span class="item-label" style="color: lightgray">预估费用:</span>
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: start">
              <span class="item-value">￥{{
                  positionInfo.jgys00 * applyPositionInfo.jscs00
                }}{{ jgdwOptions[positionInfo.jgdw00] }}</span>
              <span class="item-value" style="padding-top: 5px">￥{{
                  positionInfo.jgys00
                }}(元)*{{ applyPositionInfo.jscs00 }}(次)</span>
            </div>
          </div>
          <div class="content-item">
            <span class="item-label" style="color: lightgray">预支付金额:</span>
            <span class="item-value">{{ positionInfo.yzfje0 }}{{ jgdwOptions[positionInfo.jgdw00] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {orderApi} from "@/api/index.js"
import {positionApi} from "@/api/index.js"

export default {
  name: 'temp-order-info',
  data() {
    return {
      loading: true,
      ypxh00: "",
      gwxh00: "",
      applyPositionInfo: {},
      positionInfo: {},
      jobKind: {},
      jgdwOptions: {
        "1": "元/天",
        "2": "元/小时",
        "3": "元"
      },
      gdzt00Options: {
        "0": "待确认",
        "1": "已接单",
        "2": "服务中",
        "3": "已完成",
        "4": "已取消"
      },
      lgqyztOptions: {
        "0": "待签约",
        "1": "已签约"
      },
      gzqyztOptions: {
        "0": "待签约",
        "1": "已签约"
      },
      gzjsqrOptions: {
        "0": "未确认",
        "1": "已确认"
      },
      bxzt00Options: {
        "0": "未购买保险",
        "1": "投保单未完成",
        "2": "保险购买成功(待生效)",
        "3": "承保失败",
        "4": "保险已出单",
        "5": "保险保障中",
        "6": "保险已失效",
        "7": "保险已退费"
      },
      showCancelDialog: false,
      yy0000: ""
    }
  },
  created() {
    const params = this.$route.query
    console.log(params)
    this.ypxh00 = params.ypxh00
    this.gwxh00 = params.gwxh00
    this.init()
  },
  methods: {
    init() {
      this.queryJobKind()
      this.getApplyPosition()
      this.queryPositionInfo()
    },
    queryJobKind() {
      positionApi.queryJobKind().then((res) => {
        for (let item of res.data) {
          for (let subItem of item.treeVoList) {
            this.jobKind[subItem.gzbm00] = subItem.gzmc00
          }
        }
      })
    },
    getApplyPosition() {
      orderApi.getApplyPosition({
        ypxh00: this.ypxh00
      }).then(res => {
        this.applyPositionInfo = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    queryPositionInfo() {
      positionApi.queryPositionDetail({
        gwxh00: this.gwxh00
      }).then(res => {
        this.positionInfo = {
          ...res.data,
          gzmc00: this.jobKind[res.data.gz0000]
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  position: relative;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .item-label {
    color: lightgray;
    font-size: 16px;
    padding-left: 10px;
  }

  .item-value {
    font-size: 16px;
    padding-left: 10px;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    background-color: white;
    width: 1600px;
    border-radius: 8px;
    margin-top: 20px;
    height: fit-content;

    .content-item {
      display: flex;
      padding-top: 10px;
    }
  }
}
</style>